<template>
  <PageContent inner-border :padding="false">
    <template slot="toolbar">
      <ActionButton @click="onValidate" icon="planar-drxx07" content="保存" />
      <div style="flex:1"></div>
    </template>
    <div style="display:flex;margin:8px;flex:1;">
      <Form
        ref="form"
        :model="formData"
        :label-width="120"
        :rules="formRules"
        class="editor-forms"
      >
        <Row :gutter="8">
          <Col :span="24">
            <FormItem label="页面名称" prop="name">
              <Input
                type="text"
                v-model="formData.name"
                placeholder="填写页面名称..."
              />
            </FormItem>
          </Col>
          <Col :span="24">
            <FormItem label="页面标题" prop="title">
              <Input
                type="text"
                v-model="formData.title"
                placeholder="填写页面标题..."
              />
            </FormItem>
          </Col>
          <Col :span="24">
            <FormItem label="页面图标" prop="icon">
              <Input
                type="text"
                v-model="formData.icon"
                placeholder="填写页面图标..."
              />
            </FormItem>
          </Col>
          <Col :span="24">
            <FormItem label="页面路径" prop="path">
              <Input
                type="text"
                v-model="formData.path"
                placeholder="填写页面路径..."
              />
              <span class="form-item-desc">默认使用页面名称作为路径</span>
            </FormItem>
          </Col>
        </Row>
        <Divider dashed orientation="left">
          <Checkbox v-model="isAdvance">高级设置</Checkbox>
        </Divider>
        <template v-if="isAdvance">
          <Divider dashed>
            <Checkbox v-model="formData.hideInMenu">禁用路由</Checkbox>
          </Divider>
          <Row :gutter="8">
            <Col :span="12">
              <FormItem label="分组模式" prop="isGroup">
                <i-switch v-model="formData.isGroup" size="large">
                  <span slot="open">On</span>
                  <span slot="close">Off</span>
                </i-switch>
              </FormItem>
            </Col>
            <Col :span="12">
              <FormItem label="禁用面包屑" prop="hideInBread">
                <i-switch v-model="formData.hideInBread" size="large">
                  <span slot="open">On</span>
                  <span slot="close">Off</span>
                </i-switch>
              </FormItem>
            </Col>
            <Col :span="12">
              <FormItem label="路由排序" prop="sort">
                <InputNumber :max="100" :min="0" v-model="formData.sort" />
              </FormItem>
            </Col>
          </Row>
          <Divider dashed>查询</Divider>
          <Row :gutter="8">
            <Col :span="12">
              <FormItem label="浮动状态" prop="search.operation.fixed">
                <Select v-model="formData.search.operation.fixed">
                  <Option value="none">不浮动</Option>
                  <Option value="left">在左侧浮动</Option>
                  <Option value="right">在右侧浮动</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
          <Divider dashed>编辑</Divider>
          <Row :gutter="8">
            <Col :span="12">
              <FormItem label="窗口宽度" prop="modify.page.width">
                <InputNumber :min="100" v-model="formData.modify.page.width" />
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="8">
            <Col :span="24">
              <FormItem label="默认主键" prop="primary">
                <Input v-model="formData.primary" />
              </FormItem>
            </Col>
            <Col :span="24">
              <FormItem label="字段布局" prop="modify.field.span">
                <InputNumber
                  :max="24"
                  :min="2"
                  v-model="formData.modify.field.span"
                />
                <div class="form-item-desc">字段所占格数 参考 grid 布局，将一行平均分为24分</div>
              </FormItem>
            </Col>
          </Row>
        </template>
      </Form>

      <List item-layout="vertical">
        <draggable
          v-model="formData.fields"
          :options="dragOptions"
          :move="onMove"
        >
          <ListItem
            class="field-item"
            v-for="(element,index) in formData.fields"
            :key="index"
          >
            <div class="index">{{index+1}}</div>
            <div class="content">
              <div class="name">{{element.name}}</div>
              <div class="desc">{{element.text}}</div>
            </div>
            <div class="extra">
              <Button
                type="primary"
                size="small"
                style="margin-right: 5px"
                @click="onOption(index)"
              >设置</Button>
              <Button type="error" size="small" @click="onRemove(index)">删除</Button>
            </div>
          </ListItem>
        </draggable>
      </List>
    </div>
  </PageContent>
</template>

<script>
import mixin from "./mixin";
import { merge } from "../lib/tools";
import draggable from "vuedraggable";
const defaults = {
  name: "",
  title: "",
  icon: "",
  isGroup: false,
  hideInBread: false,
  hideInMenu: false,
  sort: 0,
  apis: {},
  search: {
    operation: {
      fixed: "right",
      width: 0,
    },
    paper: {
      enable: true,
    },
  },
  modify: {
    // 页面参数
    page: {
      // 页面宽度
      width: 550,
    },
    // 字段参数
    field: {
      // 字段所占格数 参考 grid 布局，将一行平均分为24分
      span: 24,
    },
  },
  primary: "",
  fields: [],
  children: [],
};
export default {
  mixins: [mixin],
  data() {
    return {
      formRules: {
        name: [{ required: true, message: "必填项", trigger: "blur" }],
        title: [{ required: true, message: "必填项", trigger: "blur" }],
      },
      formData: {
        ...defaults,
      },
      isAdvance: false,
      hasFields: false,
      fieldColumns: [
        { key: "name", title: "字段名", width: 200 },
        { key: "text", title: "字段标题", width: 200 },
        { key: "required", title: "必填项", width: 100 },
        { key: "editor", title: "编辑", width: 200 },
        {
          title: "操作",
          slot: "action",
          width: 150,
          align: "center",
          fixed: "right",
        },
      ],
      isDragging: false,
    };
  },
  watch: {
    params: {
      immediate: true,
      deep: true,
      handler(value) {
        this.parseParams(value);
      },
    },
  },
  methods: {
    parseParams(params) {
      const option = merge(params || {}, { meta: { ...defaults } });
      const { meta } = option;
      this.formData = { ...meta };
      this.isAdvance = false;
      this.hasFields = meta.fields.length > 0;
      console.info(meta);
    },
    onSubmit() {
      const { parentName } = this.params || {};
      const pageName = this.formData.name;
      let parentPage;
      let pageIndex;
      if (parentName) {
        parentPage = this.config.pages.find((p) => p.name == parentName);
        pageIndex = parentPage.children.findIndex((p) => p.name == pageName);
      } else {
        pageIndex = this.config.pages.findIndex((p) => p.name == pageName);
      }
      const pageOption = { ...this.formData };
      if (parentPage) {
        if (pageIndex == -1) {
          parentPage.children.push(pageOption);
        } else {
          parentPage.children[pageIndex] = pageOption;
        }
      } else {
        if (pageIndex == -1) {
          this.config.pages.push(pageOption);
        } else {
          this.config.pages[pageIndex] = pageOption;
        }
      }
      console.info(this.config);
      this.$emit("change", this.config);
    },
    onValidate() {
      this.$refs.form.validate((valid) => {
        valid && this.onSubmit();
      });
    },
    createNewField() {
      this.formData.fields.push({});
    },
    validator(rule, value, callback, source, options) {
      const items = this.formData.fields.filter((p) => p.dictKey == value);
      if (items.length > 1) {
        return callback(new Error("存在相同标识"));
      } else {
        return callback();
      }
    },

    onMove({ relatedContext, draggedContext }) {
      const relatedElement = relatedContext.element;
      const draggedElement = draggedContext.element;
      return (
        (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
      );
    },
    onOption(index) {},
    onRemove(index) {
      this.formData.fields[index].status = 0;
    },
  },
  computed: {
    dragOptions() {
      return {
        animation: 0,
        group: "description",
        ghostClass: "ghost",
      };
    },
  },
  components: {
    draggable,
  },
};
</script>

<style lang="less" scoped>
.form-item-desc {
  font-style: italic;
  color: #999;
  margin-top: 8px;
}
.editor-forms {
  margin-top: 8px;
  padding: 8px;
  width: 500px;
}
.field-item {
  width: 400px;
  display: flex;
  align-items: center;
  padding: 8px 0;
  .index {
    font-size: 20px;
    font-weight: 800;
    background: #f0f0f0;
    border-radius: 50%;
    margin: 0 8px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
  }
  .content {
    flex: 1;
    .name {
      font-weight: 600;
    }
    .desc {
      color: #999;
      font-style: italic;
    }
  }
  .extra {
  }
}
</style>
